import "./index.scss";
import TabbarBox from "../../components/tabbar";
import HeaderNav from "../../components/headerNav";
import PayPopup from "./component/payPopup";
import { Progress } from "@nutui/nutui-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

function Pledge() {
  const navigate = useNavigate();
  const [showIcon, setShowIcon] = useState(false)
    const closePayPopup = (val) => {
      setShowIcon(val)
    }
    const openPayPopup = () => {
      setShowIcon(true)
    }
    const goPath=()=>{
      navigate("/PledgeList");
    }
  const gdCoor =
    "linear-gradient( 270deg, #FDCD9D 0%, #FFF5C7 50%, #EE8233 100%)";
  return (
    <>
      <div className="page-box page-pledge">
        <div className="header-pledge-content">
          <HeaderNav></HeaderNav>
          <div className="end-box">
            <div className="header-option">
              <div className="header-txt">全网质押COIN</div>
              <div className="header-txt header-txt-right">全网质押USDT</div>
            </div>

            <div className="header-option">
              <div className="header-txt header-size-16">283,457.09</div>
              <div className="header-txt header-size-16 header-txt-right">
                1,003,698.30
              </div>
            </div>
            <div className="progress-option">
              <Progress percent={60} color={gdCoor} />
            </div>
            <div className="hint-txt-option">
              <div className="left-txt">
                <span className="text-1">距离启动外盘买还差</span >
                <span className="text-2">270,220.35 USDT</span>
              </div>
              <div className="right-txt">25.6%</div>
            </div>
            <div className="hint-txt-option">
              <div className="hint-txts">*LP达标128万USDT启动外盘买</div>
            </div>
          </div>
        </div>
        <div className="btn-option" onClick={openPayPopup}>参与质押</div>
        <div className="content-info-box">
          <div className="txt-option">我的数据</div>
          <div className="data-content-box">
            <div className="data-info-box">
              <div className="header-option">
                <div className="txt-1">我的COIN总销毁量</div>
                <div className="txt-2">1,250,856.83</div>
              </div>

              <div className="end-content-box">
                <div className="info-option">
                  <div className="txt-1">我的COIN质押总量</div>
                  <div className="txt-2">2,500,856.83</div>
                </div>
                <div className="border-option"></div>
                <div className="info-option">
                  <div className="txt-1">我的USDT质押总量</div>
                  <div className="txt-2">50,032.85</div>
                </div>
              </div>
            </div>
          </div>
          <div className="data-box">
            <div className="data-item">
              <div className="txt-1">获得VAULT总量</div>
              <div className="txt-2">83,457.09</div>
              <div className="txt-3">VAULT</div>
            </div>

            <div className="data-item">
              <div className="txt-1">获得收益</div>
              <div className="txt-2">0.00</div>
              <div className="txt-3">USDT</div>
            </div>
          </div>

          <div className="btn-lst">
            <div className="btn btn-1" onClick={goPath}>质押记录</div>
            <div className="btn btn-1 btn-2">领取奖励</div>
          </div>
          <div className="hint-txt-end-box">*参与质押后，需要一年后才会退回COIN</div>
        </div>
      </div>
      <PayPopup showIcon={showIcon} closePopupChange={(e)=>closePayPopup(e)}></PayPopup>
      <TabbarBox activeName={1}></TabbarBox>
    </>
  );
}
export default Pledge;
